<template>
	<view id="page-path">
		<view class="top-box">
			<my-city/>
			<view class="info-box">
				<view class="line-box"></view>
				<view class="switch-btn" @click="SWITCH_INFO"><uni-icon iconType="ali" type="e632" size="20" color="#3880d5"></uni-icon></view>
				<view class="begin-site" @click="handleBegin">
					<view class="" v-if="beginSite">{{beginSite}}</view>
					<view class="" v-else>开始站点</view>
				</view>
				<view class="end-site" @click="handleEnd" search-btn>
					<view class="" v-if="endSite">{{endSite}}</view>
					<view class="" v-else>结束站点</view>
				</view>
			</view>
			<button class="search-btn" plain="true" @click="handleSearch">查询</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import myCity from "@/my-components/my-city.vue"
	import ssSelectCity from '@/components/ss-select-city/ss-select-city.vue'
	import {mapState as indexState} from 'vuex'
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers('transfer')
	export default {
		components:{uniIcon,myCity},
		computed: {
			...mapState(['beginSite', 'endSite'])
		},
		methods: {
			...mapMutations(['SWITCH_INFO']),
			...mapActions(['GET_TRANFER_SCHEME']),
			handleBegin() {
				uni.navigateTo({
					url: 'search-begin/search-begin'
				});
			},
			handleEnd() {
				uni.navigateTo({
					url: 'search-end/search-end'
				});
			},
			handleSearch() {
				this.GET_TRANFER_SCHEME()
					.then(res => {
						uni.navigateTo({
							url: 'scheme/scheme'
						});
					})
			}
		}
	}
</script>

<style lang="scss">
	#page-path {
		box-sizing: border-box; 
		height: 100%;
		width: 100%;
		overflow: scroll;
	}
	.top-box{
		padding:0 20upx 30upx;
		background-color: $g-bg-color-primary;
	}
	.cur-city{
		font-size: 50upx;
		font-weight: 800;
		overflow: hidden
	}
	.path-top{
		position: relative;
		height: 100upx;
		line-height: 100upx;
		.title{
			font-size: 50upx;
		}
	}
	.info-box{
		position: relative;
		padding-left:50upx;
		padding-right: 80upx;
		margin-bottom: 50upx;
		background-color: $g-box-color-primary;
		.line-box{
			position: absolute;
			left: 23upx;
			top: 0;
			bottom: 0;
			margin: auto 0;
			height: 80upx;
			border-left: 3upx solid #e5e5e5;
			&::after,&::before{
				content: "";
				position: absolute;
				left:-9upx;
				width: 16upx;
				height: 16upx;
				border-radius: 50%;
			}
			&::after{
				bottom: -9upx;
				background-color: #5490eb;
			}
			&::before{
				top:-9upx;
				background-color: #ff8372;
			}
		}
	}
	.switch-btn{
		position: absolute;
		top: 0;
		right: 15upx;
		bottom: 0;
		margin: auto 0;
		z-index: 2;
		width: 50upx;
		height:50upx;
		line-height: 50upx;
		border-radius: 50%;
		background-color:$g-btn-color-primary;
		text-align: center;
	}
	.begin-site,
	.end-site {
		height: 80upx;
		line-height: 80upx;
		padding: 0 20upx;
		margin: 0 auto;
	}
	.begin-site{
		border-bottom:3upx solid #f5f5f5;
	}
	button.search-btn{ 
		height: 100upx;
		line-height: 100upx;
		background-color:$g-btn-color-primary;
		border: none;
		color: $g-font-color-primary;
		&.button-hover{
			background-color:$g-btn-color-primary;
			color: $g-font-color-primary;
		}
	} 
	
</style>
